<template>
    <div>
        <h3 class="h3-aaa">{{name}} ——库容曲线表</h3>
        <div id="k-chart" class="k-chart"></div>
        <div>
            <van-cell-group class="gg">

                <van-field class="gg-ii" label="水位(m)" v-model="water_level" type="number" placeholder="水位(m)" />

                <van-field  class="gg-ii" label="库容(万m²)" readonly v-model="water_storage" type="number" placeholder="库容(万m²)" />
                <van-button type="primary" class="gg-ii" @click="changeA(water_level)">转换</van-button>
            </van-cell-group>
        </div>
    </div>
</template>
<script>
    import options from './option'
    import { CapacityStorage, capacityStorageBaseOption } from '@/api/capacity_storage'
    import * as echarts from 'echarts'
    import { getWaterStorageData } from './water-storage'
    import fetchData from '@/api/getPageList'
    import { cubicSplineInterpolation } from '@/api/math'
    export default {
        data() {
            return {
                name: this.$route.query.name,
                options: options,
                capacityStorageClass: new CapacityStorage(),
                loading: false, chart: {},
                resData: [], min: 0, max: 0,
                water_level: 0, water_storage: 0, waterStorageXY: { y: [], x: [] }
            }
        },
        watch: {

        },
        created() {
            this.resData = getWaterStorageData(this.name);
            this.options.series[0].data = this.resData.map(item => ([item.value, item.height]))
            this.min = this.resData[0].height;
            this.max = this.resData[this.resData.length - 1].height;
            this.water_level = this.min;
            this.resData.map((item) => {
                this.waterStorageXY.y.push(item.height);
                this.waterStorageXY.x.push(item.value);
            })
        },
        mounted() {
            var chartDom = document.getElementById('k-chart');
            this.chart = echarts.init(chartDom);
            this.chart.setOption(this.options);
        },
        methods: {
            changeA(new_val) {
                if (new_val < this.min || new_val > this.max) {
                    alert('请输入' + this.min + '~' + this.max + '米');
                    return;
                }
                if (new_val == 0) { return }
                let num = cubicSplineInterpolation(new_val, this.waterStorageXY.y, this.waterStorageXY.x);
                if (num) {
                    num = num.toFixed(4)
                }
                this.water_storage = num;
            },
            /**
             * 重新加载charts
             */
            resetChart() {
                this.chart.clear();

                this.options.series[0].data = this.chart_data.series;
                this.options.series[1].data = this.chart_data.maxList;
                this.options.xAxis.data = this.chart_data.x;
                this.chart.setOption(this.options);
                console.log('折线图重置成功')
            },

        }
    }
</script>
<style lang="less" scoped>
    .k-chart {
        height: 300px;
    }

    .h3-aaa {
        text-align: center;
    }
    .gg {
    text-align: center;
    /* margin-top: 100px; */
    padding: 20px;
}

.gg-ii {
    /* margin: 20px; */
    border-bottom: 1px solid;
    margin: 15px 0;
}
</style>